<template>
  <!-- 预备投资项目库  -->
    <div class="interestCalculationDetailsPage">
        <div class="search-wrap d-flex flex-wrap">
            <div class="search-item d-flex a-center m-l20 m-b10">
                <label>创建时间</label>
                <el-date-picker
                        class="m-l10"
                        v-model="form.valueTime"
                        @change="createTimeChange"
                        value-format="YYYY-MM-DD"
                        type="daterange"
                        range-separator="-"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        size="large"
                />
            </div>
            <div class="search-item d-flex a-center m-l20 m-b10">
                <label>项目负责部门</label>
                <el-select
                    v-model="form.departmentId"
                    class="m-l10"
                    @change="departmentChange"
                >
                    <el-option v-for="(item,index) in state.allDepartmentList" :key="index" :label="item.departmentName" :value="item.departmentId"></el-option>
                </el-select>
            </div>
            <div class="search-item d-flex a-center m-l20 m-b10">
                <label>发起人</label>
                <el-select
                    v-model="form.responsibleUserId"
                    class="m-l10"
                >
                    <el-option v-for="(item,index) in state.departmentPersonList" :key="index" :label="item.userName" :value="item.userId"></el-option>
                </el-select>
            </div>
            <div class="search-item d-flex a-center m-l20 m-b10">
                <label>方案状态</label>
                <el-select
                        v-model="form.status"
                        class="m-l10"
                >
                    <el-option  label="审批中" value="1"></el-option>
                    <el-option  label="已通过" value="2"></el-option>
                    <el-option  label="已驳回" value="3"></el-option>
                </el-select>
            </div>
            <div class="search-item d-flex a-center m-l20 m-b10">
                <label>方案名称(关键字)</label>
                <el-input v-model="form.keyword" placeholder="请输入方案名称(关键字)" class="m-l10"></el-input>
            </div>
            <div class="search-buttons m-l50 d-flex a-center m-b10">
                <el-button
                        color="#fc702b"
                        style="color:#fff;"
                        @click.prevent="onQuery"
                >查询</el-button>
                <el-button
                        color="#f0f0f0"
                        style="color: #000000"
                        @click.prevent="onReset"
                >重置</el-button>
            </div>
        </div>
        <public-table
                ref="publicTableRef"
                index
                selection
                :indexWidth="'100'"
                :page="page"
                :tableData="tableData"
                :tableOption.sync="tableOption"
                @page-change="onPageChange"
                @handleSelectionChange="handleSelectionChange"
        >
            <template #buttons="scope">
                <el-button
                        v-if="scope.row.status===3"
                        class="m-b10"
                        color="#FFF8F6"
                        style="color:#FC7018;border-color: #FC7018;"
                        @click="editHandle(scope.row)"
                >
                    编辑
                </el-button>
                <el-button
                        v-if="scope.row.status===1 || scope.row.status===2"
                        class="m-b10"
                        color="#FC7018"
                        style="color:#FFFFFF;"
                        @click="queryHandle(scope.row)"
                >
                    查看
                </el-button>
                <el-button
                    v-if="scope.row.status===2"
                    class="m-b10"
                    color="#D4AE85"
                    style="color:#FFFFFF;"
                    @click="filingsHandle(scope.row)"
                >
                    备案
                </el-button>
            </template>
        </public-table>
    </div>

    <view-details-popup ref="viewDetailsPopupRef"/>
    <edit-programme-popup
        ref="editProgrammePopupRef"
        @on-success="onSuccess"
    />
    <filings-popup
        ref="filingsPopupRef"
        @on-success="onSuccess"
    />
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {
    ElDatePicker
} from "element-plus";
import PublicTable from "@/components/PublicTable.vue";
import {tableCommonFun} from "@/hooks/tableCommon";
import {useRouter} from "vue-router";
import {department} from "@/api/project";
import ViewDetailsPopup from "./components/viewDetailsPopup";
import EditProgrammePopup from "./components/editProgrammePopup";
import FilingsPopup from "./components/filingsPopup";


const interfaceConfig = reactive({
    fileName:'investment',
    apiPath:'programmeManagementApi.getPage',
});

const router = useRouter();
const projectId = router.currentRoute.value.params.projectId;

/**
 * 默认参数
 * @type {UnwrapNestedRefs<{prepareStatus: number}>}
 */
const defaultParameters = reactive({
    projectId: projectId
});

const {
    form,
    page,
    tableOption,
    tableData,
    onQuery,
    onReset,
    onPageChange,
    getData,
    onExport
}  = tableCommonFun(interfaceConfig,{},defaultParameters);

form.value = {
    startTime:'',
    endTime:'',
    responsibleUserId:'',
    status:'',
    keyword:'',
    departmentId:'',
    valueTime:'',
}

tableOption.value = [
    { label: "关联项目", prop: "projectName" },
    { label: "项目类型", prop: "projectTypeName" },
    { label: "创建时间", prop: "createTime" },
    { label: "发起人", prop: "responsibleUserName"},
    { label: "状态", prop: "status",width:150,formatter:(val,row)=>{
            return ['草稿','审批中','已通过','已驳回'][val] || '-';
        } },

    {   label: '操作',
        slot: true,
        width: 400,
        overHidden:false,
        slotName: 'buttons',
        fixed: "right"
    },
];

const state = reactive({
    departmentPersonList:[],
    allDepartmentList:[]
});

/**
 * 获取所有部门
 */
const getAllDepartments = () => {
    department.getAllDepartments().then((res) => {
        const { code, data, msg } = res;
        if (code == 200) {
            state.allDepartmentList = data;
        }
    });
};

/**
 * 创建时间
 * @param e
 */
const createTimeChange = (e) => {
    if (e && (e instanceof Array) && e.length!==0){
        form.value.startTime = e[0];
        form.value.endTime = e[1];
    }
    if(!e || (e instanceof Array && e.length ===0)){
        form.value.startTime = '';
        form.value.endTime = '';
    }
}

/**
 * 根据部门id查负责人
 * @param responsibleDepartmentId
 */
const getLeaderByDepartmentId = (responsibleDepartmentId) => {
    department.getLeaderByDepartmentId(responsibleDepartmentId).then((res) => {
        const { code, data, msg } = res;
        if (code == 200) {
            state.departmentPersonList = data;
        }
    });
};

/**
 * 部门选中
 * @param e
 */
const departmentChange = (e) => {
    getLeaderByDepartmentId(e);
}

const onSuccess = () => {
    onQuery();
}

/**
 * 编辑
 * @param row
 */
const editProgrammePopupRef = ref(null);
const editHandle = (row) => {
    editProgrammePopupRef.value.open(row);
}

/**
 * 查看
 * @param row
 */
const viewDetailsPopupRef = ref(null);
const queryHandle = (row) => {
    viewDetailsPopupRef.value.open(row);
}

/**
 * 备案
 * @param row
 */
const filingsPopupRef = ref(null);
const filingsHandle = (row) => {
    filingsPopupRef.value.open(row);
}

/**
 * 表格多选
 * @param e
 */
const handleSelectionChange = (e) => {
    state.selectedList = e;
}

onMounted(()=>{
    getData({
        pageNum:1,
        pageSize:10,
        param:{
            projectId:projectId
        }
    });
    getAllDepartments();
});
</script>

<style lang="scss" scoped>
.interestCalculationDetailsPage{
  .delete-icon{
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
  .search-wrap{
    .search-item{

      .el-input{
        width: auto !important;
      }
    }
    .search-buttons{
      .icon-export{
        width: 18px;
        height: 18px;
      }
    }
  }
}
.public-dialog-content{
  .dialog-title-box{
    height: 30px;
    span{
      font-size: 15px;
      font-weight: 600;
    }
  }
}
</style>
